<template>
    <div class="Expander">
        <div class="Expander__trigger"
             @click="open=!open"
             :class="open?'active':'beforeBorder'">
            <svg
                class="Expander__trigger-Icon"
                :class="{open:open}"
                width="40" height="12"
                stroke="cornflowerblue">
                <polyline points="12,2 20,10 28,2" stroke-width="3" fill="none"></polyline>
            </svg>
            {{ title }}
        </div>
        <transition :name="animation">
            <div class="Expander__body" v-show="open">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "Expander",
        props: {
            title: {
                type: String,
                default: 'title'
            },
            animation: {
                type: String,
                default: 'rightToLeft'
                // validator: prop => ['leftToRight', 'bounceIn', 'bottomToTop'].includes(prop)
            },
            active: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                open: false
            }
        },
        created() {
            this.open = this.active
        }
    }
</script>

<style lang="stylus">
    .beforeBorder
        position relative
        &:before {
            transition: opacity .1s linear, transform .5s ease-in-out;
            position: absolute;
            border-bottom: 1px solid currentColor;
            content: '';
            width: 100%;
            left: 0;
            bottom: -1px;
        }
        &:not(:hover)::before {
            transform: scaleX(0);
            opacity: 0;
        }


    .Accordion
        background: #fff;
        box-shadow: 0 1px 12px 1PX rgba(0,0,0,0.25);
        overflow: hidden;


    .Expander
        &__trigger
            cursor pointer
            padding .5rem 0
            border-bottom 1px solid #efefef
            text-align left
            svg
                margin  0
            &:hover
                color #477dca
            &.active
                //color #777
                border-bottom-color #477dca

            &-Icon
                transition transform 0.2s cubic-bezier(0.23, 1, 0.32, 1)
                &.open
                    stroke tomato
                    transform rotate(180deg)

        &__body
            background transparent //#dee2e6 //#f1f1f1


    .rightToLeft-enter-active
        animation rightToLeft .5s;
    .rightToLeft-leave-active
        animation rightToLeft .5s reverse
    @keyframes rightToLeft
        0%
            transform: translateX(100vw)
        50%
            transform: translateX(-2em)
        100%
            transform: translateX(0)


    .leftToRight-enter-active
        animation leftToRight .5s;
    .leftToRight-leave-active
        animation leftToRight .5s reverse
    @keyframes leftToRight
        0%
            transform: translateX(-100vw)
        50%
            transform: translateX(2em)
        100%
            transform: translateX(0)


    .bounceIn-enter-active
        animation bounceIn .3s;
    .bounceIn-leave-active
        animation bottomToTop .2s reverse
    @keyframes bounceIn {
        from,
        20%,
        40%,
        60%,
        80%,
        to {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
            opacity: 0;
            transform: scale3d(0.3, 0.3, 0.3);
        }
        20% {
            transform: scale3d(1.1, 1.1, 1.1);
        }
        40% {
            transform: scale3d(0.9, 0.9, 0.9);
        }
        60% {
            opacity: 1;
            transform: scale3d(1.03, 1.03, 1.03);
        }
        80% {
            transform: scale3d(0.97, 0.97, 0.97);
        }
        to {
            opacity: 1;
            transform: scale3d(1, 1, 1);
        }
    }

    .bottomToTop-enter-active
        animation bottomToTop .5s forwards;
    .bottomToTop-leave-active
        animation bottomToTop .5s reverse
    @keyframes bottomToTop
        0%
            opacity 0
            transform: translateY(100%)
        100%
            transform: translateY(0)
</style>
